<template>
  <div ref="content" class="content">
    <div class="left" data-drop="move">
      <div v-for="(item, index) in list" :key="index" draggable="true" data-effect="copy" :class="`color${index + 1}`">
        {{
          item }}</div>
    </div>
    <div class="right">
      <table>
        <thead>
          <tr>
            <td v-for="(item, index) in weekList" :key="index">{{ item }}</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(itme, index) in list" :key="`${itme}_${index}`">
            <td v-for="wItem in weekList" :key="wItem" data-drop="copy" />
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DropView',
  data() {
    return {
      list: ['语文', '数学', '英语', '物理', '化学', '生物'],
      weekList: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
      source: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const container = this.$refs.content
      container.ondragover = (e) => {
        e.preventDefault()
      }
      container.ondragstart = (e) => {
        // 如果是移除操作，则设置手势为移除
        if (e.target.dataset.effect === 'move') {
          e.dataTransfer.effectAllowed = 'move'
        }
        this.source = e.target
        e.target.style.opacity = 0.5
      }

      // 进入放置元素
      container.ondragenter = (e) => {
        this.clearHoverClass()
        const dropNode = this.getDropNode(e.target)
        // 判断放置元素是否可以接收拖拽元素，当 data-effect 和 data-drop 的值相等时，说明可以
        if (dropNode) {
          dropNode.classList.add('hover-background')
        }
      }
      // 对放置元素解发的件事
      container.ondrop = (e) => {
        this.clearHoverClass()
        const dropNode = this.getDropNode(e.target)
        let removeFlag = true
        // 判断放置元素是否可以接收拖拽元素，当 data-effect 和 data-drop 的值相等时，说明可以
        if (dropNode && dropNode.dataset.drop === this.source.dataset.effect) {
          removeFlag = false
        } else {
          removeFlag = true
        }

        // 新增
        if (dropNode.dataset.drop === 'copy') {
          const cloneNode = this.source.cloneNode(true)
          dropNode.innerHTML = ''
          cloneNode.dataset.effect = 'remove'
          cloneNode.dataset.drop = 'copy'
          cloneNode.style.opacity = '1'
          cloneNode.addEventListener('click', this.getDetails)
          dropNode.appendChild(cloneNode)
          // 新增后，是否将拖拽元素移除
          if (removeFlag && this.source.dataset.effect === 'remove') {
            this.source.remove()
          }
        } else {
          // 移除
          this.source.remove()
        }
      }

      container.ondragend = (e) => {
        e.target.style.opacity = '1'
      }
    },
    getDropNode(node) {
      while (node) {
        //  判断元素是否设置了data-drop属性，如果设置了，说明此元素是一个放置元素
        if (node.dataset && node.dataset.drop && node.dataset.effect !== 'remove') {
          return node
        }
        node = node.parentNode
      }
      return node
    },
    clearHoverClass() {
      document.querySelectorAll('.hover-background').forEach(item => {
        item.classList.remove('hover-background')
      })
    },
    getDetails() {
      alert('查看详情')
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  display: flex;
}

.left {
  width: 80px;
  text-align: center;
  margin-right: 20px;
}

.left div {
  margin: 5px;
  line-height: 36px;
  height: 36px;

}

.color1 {
  background: rgb(26, 231, 156)
}

.color2 {
  background: rgb(107, 219, 15)
}

.color3 {
  background: rgb(208, 133, 13)
}

.color4 {
  background: rgb(30, 98, 246)
}

.color5 {
  background: rgb(210, 40, 113)
}

.color6 {
  background: rgb(210, 224, 26)
}

td {
  border: 1px solid #999;
  height: 36px;
  width: 90px;
  text-align: center;
}

td div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.hover-background {
  background-color: #999;
}
</style>
